<template>
  <div class="video3d">
    <div class="video-projection" id="projection-open" @click="proOn">
      进入视频投影
    </div>
    <div class="video-projection" id="projection-close" @click="proOff">
      退出视频投影
    </div>
  </div>
</template>

<script>
  // 视频投影用js文件
  import CesiumVideo3d from "@/assets/js/CesiumFun/cameraOperate/videoFunction/video3D/CesiumVideo3d.js";
  import { changePark } from 'assets/js/CesiumFun/carOperate/carPark/operateCarModel' // 停车场车辆控制

  export default {
    name: "Video3d.vue",
    data() {
      return {
        show: false,
        park: [],
        camera: [    // 视频投影参数
          { // 上
            xdvurl:
              "http://58.56.130.66:50036/qdyjy?port=1935&app=qdyjy&stream=xdl34",
            longitude: 120.432375,
            latitude: 36.31425,
            altitude: 6,
            heading: -11,
            pitch: -2,
            roll: 0,
            near: 1,
            far: 50,
            fov: 60,
          },
          { // 左
            xdvurl:
              "http://58.56.130.66:50036/qdyjy?port=1935&app=qdyjy&stream=xdl33",
            longitude: 120.43246,
            latitude: 36.31433,
            altitude: 6,
            heading: -97,
            pitch: -15.5,
            roll: 0,
            near: 1,
            far: 100,
            fov: 60,
          },
          { // 右
            xdvurl:
              "http://58.56.130.66:50036/qdyjy?port=1935&app=qdyjy&stream=xdl35",
            longitude: 120.43222,
            latitude: 36.31428,
            altitude: 6,
            heading: 74,
            pitch: -19,
            roll: 0,
            near: 1,
            far: 100,
            fov: 60,
          },
        ],
        cutModel: [  // 视频裁剪用模型
          {
            url: 'models/Build/videoCut/bottomBox.glb', modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
              Cesium.Cartesian3.fromDegrees(120.43180, 36.31480, 3.8)
            ), color: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0.0001)
          },
          {
            url: 'models/Build/videoCut/midCut.glb', modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
              Cesium.Cartesian3.fromDegrees(120.43180, 36.31480, 3.8)
            ), color: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0.0001)
          },
          {
            url: 'models/Build/videoCut/leftCut.glb', modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
              Cesium.Cartesian3.fromDegrees(120.43180, 36.31480, 3.8)
            ), color: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0.0001)
          },
          {
            url: 'models/Build/videoCut/rightCut.glb', modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
              Cesium.Cartesian3.fromDegrees(120.43180, 36.31480, 3.8)
            ), color: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0.0001)
          },
        ],
        models: [],  // 已创建的裁剪视频用模型
        selectedIndex: 0,
        cvList: [],
        pointViewer: {},
      };
    },
    methods: {
      // 开启视频投影
      proOn() {
        // 防止在页面上多次错误点击
        if (this.show == true) {
          return
        }
        // 获取播放视频流的video标签
        var camera02 = document.getElementById("trailer2")
        var camera01 = document.getElementById("trailer1")
        var camera00 = document.getElementById("trailer0")
        var cameraVideo = [camera01, camera02, camera00]
        // 隐藏所有的设备
        this.showEquipments(false);
        // 添加视频裁剪用模型
        if (this.models.length == 0) { // 如果没有创建过裁剪用模型先创建
          for (let i in this.cutModel) {
            var primitive = viewer.scene.primitives.add(Cesium.Model.fromGltf({
              id: this.cutModel[i].id,
              url: this.cutModel[i].url,
              modelMatrix: this.cutModel[i].modelMatrix,
              scale: 10,
              color: this.cutModel[i].color
            }))
            this.models.push(primitive)
          }
        }
        else {                         // 如果创建过直接对创建好的模型进行隐藏
          for (let i in this.models) {
            this.models[i].show = true
          }
        }
        // 创建观察点
        var entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(120.432319, 36.314353, 6),
          point: {
            color: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0),
            pixelSize: 10,
          },
        });
        viewer.trackedEntity = entity;
        entity.viewFrom = new Cesium.Cartesian3(0.2, -1, 0);
        this.pointViewer = entity;

        // 添加视频投影
        for (let i in this.camera) {
          var camera = this.camera[i];
          let url = camera.xdvurl;
          let position = {
            x: Number(camera.longitude),
            y: Number(camera.latitude),
            z: camera.altitude,
          };
          let rotation = { x: camera.pitch, y: camera.heading, z: camera.roll };
          let far = camera.far;
          let fov = camera.fov;

          this.cvList[i] = new CesiumVideo3d(Cesium, viewer, {
            position: position,
            rotation: rotation,
            aspectRatio: 100,
            fov: fov,
            far: far,
            url: url,
            flv: cameraVideo[i],
            aspectRatio: 1080 / 720,
          });
        }
        // 关闭websocket
        this.$emit('changeWsState', false)
        this.park[0] = 0;
        this.park[1] = 0;
        this.park[2] = 0;
        this.park[3] = 0;
        this.park[4] = 0;
        // console.log(this.park);
        changePark(this.park);
        // 设置当前状态
        this.show = true
      },

      // 关闭视频投影
      proOff() {
        // 防止在页面上多次错误点击
        if (this.show == false) {
          return
        }
        // 显示所有设备
        this.showEquipments(true);
        // 隐藏创建的视频裁剪用模型
        for (let i in this.models) {
          this.models[i].show = false
        }
        // 取消观察点模式
        viewer.trackedEntity = null;
        // 删除创建的视频投影
        for (let i in this.cvList) {
          this.cvList[i].destroy()
        }
        // 开启视频投影
        this.$emit('changeWsState', true)
        // 设置当前状态
        this.show = false
      },

      // 显示/隐藏所有的设备
      showEquipments(flag) {
        let areas = this.$store.state.radar.radarAreaCollection;
        let poles = this.$store.state.pole.poleCollection;
        let radars = this.$store.state.radar.radarCollection;
        let cameras = this.$store.state.camera.cameraCollection;
        let hideEquip = [...poles, ...radars, ...cameras]
        let equipments = areas.concat(poles).concat(radars).concat(cameras);
        for (let i in areas) {
          areas[i].show = flag;
        }
        for (let i in hideEquip) {
          let scale
          flag ? scale = 10 : scale = 0.1
          let mat = hideEquip[i]._root.transform
          var modelScale = Cesium.Matrix4.fromUniformScale(scale);
          Cesium.Matrix4.multiply(mat, modelScale, mat);
          hideEquip[i]._root.transform = mat
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .video3d #projection-open {
    top: 150px;
    right: 52px;
  }

  .video3d #projection-close {
    top: 190px;
    right: 52px;
  }

  .video3d .video-projection {
    position: absolute;
    color: aliceblue;
    font-size: 13px;
    text-align: center;
    line-height: 30px;
    background-color: rgb(48, 51, 54);
    border-radius: 10px;
    width: 110px;
    height: 30px;
    z-index: 2;
  }

  .video3d .video-projection:hover {
    cursor: pointer;
    background-color: rgb(68, 136, 187);
    border: 0.1px solid aliceblue;
    box-shadow: rgb(255, 255, 255) 0px 0px 10px;
  }
</style>